<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>祖先</title>
  <style>
    .cls *{
      border: 1px solid lightgray;
      color: lightgray;
      margin: 5px;
      padding: 15px;
    }
  </style>
   <script src="js/jquery/jquery-3.3.1.min.js"></script>
  <script>
    $(function (){
      $("#btn1").click(function (){
          // $("#btn1").css("backgroundColor","green");
          // $("#btn1").css({"backgroundColor":"green","border":"2px solid red",});
        $("span").parent().css({"color":"red","border":"2px solid red"});
      });
      $("#btn2").click(function (){
        $("span").parents().css({"color":"red","border":"2px solid red"});
      });
      $("#btn3").click(function (){
        $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
      });
    });
  </script>
</head>
<body>
<div class="cls">
  <div style="width: 500px">
    <ul>
        <li><span>当前的目标</span> </li>
    </ul>
</div>
</div>

<button id="btn1">直接父元素</button><button id="btn2">十八代祖宗</button>

<button id="btn3">介于元素之间的元素</button>
</body>
</html>